<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">

            <!--下拉框选择示例-->
            <el-form-item label="栏目级别：" prop="level">
                <el-col :span="15">
                    <el-radio v-model="form.level" label="0" @change="parentMenuChanges">一级栏目</el-radio>
                    <el-radio v-model="form.level" label="1" @change="parentMenuChanges">子级栏目</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item label="父栏目：" prop="father" v-show="form.level != 0">
                <el-col :span="8">
                    <el-cascader
                            placeholder="选择父栏目"
                            v-model="form.father"
                            :options="temporaryFatherData"
                            change-on-select
                            :props="props">
                    </el-cascader>
                </el-col>
            </el-form-item>

            <!--单行录入示例-->
            <el-form-item label="栏目名称：" prop="name">
                <el-col :span="8">
                    <el-input v-model="form.name" placeholder="请输入栏目名称"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="跳转地址：" prop="urls">
                <el-col :span="8">
                    <el-input v-model="form.urls" placeholder="请输入跳转地址"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="显示顺序：" prop="order">
                <el-col :span="8">
                    <el-input v-model="form.order" placeholder="请输入显示顺序"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="是否显示：" prop="isShow">
                <el-col :span="15">
                    <el-radio v-model="form.isShow" label="0">是</el-radio>
                    <el-radio v-model="form.isShow" label="1">否</el-radio>
                </el-col>
            </el-form-item>

            <!--提交按钮-->
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <!--<el-button @click="resetForm">重置</el-button>-->
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {
                //验证规则
                rules: {
                    name: [
                        {required: true, message: '请输入栏目名称', trigger: 'blur'}
                    ],
                    urls: [
                        {required: true, message: '请输入跳转地址', trigger: 'blur'}
                    ],
                    order: [
                        {required: true, message: '请输入显示顺序', trigger: 'blur'}
                    ],
                    isShow: [
                        {required: true, message: '请选择是否显示', trigger: 'blur'}
                    ],
                },
                props: {
                    value: 'value'
                },
                tempDatas: {},
            }
        },
        //初始化函数
        mounted() {
            this.initListData();
            this.initData();
        },
        //计算属性
        computed: {
            ...mapState({
                form : state => state.EditColumnModule.form,
                temporaryFatherData : state => state.EditColumnModule.temporaryFatherData
            })
        },
        //组件方法
        methods: {
            initListData(){
                //获取菜单列表信息
                this.$myLoading.startLoading()
                this.$http.getHttp(this.$API.cmsColumnSearch + "/skip/0/limit/1000", rs => {
                    this.$myLoading.endLoading()
                    this.$store.commit('EditColumnModule/updateTemporaryFatherData',this.$common.arrayBottomMenu(rs.data))
                });
            },
            //数据获取
            initData(){

                //获取菜单列表信息
                this.$myLoading.startLoading()
                this.$http.getHttp(this.$API.cmsColumnSearch + "/cc_id/" + this.$route.query.cc_id, rs => {
                    this.tempDatas = rs.data[0];
                    this.$store.commit('EditColumnModule/udpateForm',rs.data[0])
                    this.$myLoading.endLoading()
                });
            },
            //添加按钮
            submitForm(form){

                this.$refs[form].validate((valid) => {

                    if (valid) {

                        if(this.form.level == 0){
                            this.form.father = ['0'];
                        }

                        for(var ss=0;ss<this.form.father.length;ss++){
                            if(this.form.father[ss] == ''){
                                this.form.father.splice(ss,1);
                            }
                        }

                        var fidStr = this.form.father.join(',');

                        var params = {
                            update_where    : 'cc_id',
                            cc_id			: this.$route.query.cc_id,
                            cc_fid			: this.form.father[this.form.father.length-1],
                            cc_name		    : this.form.name,
                            cc_url			: this.form.urls,
                            cc_order        : this.form.order,
                            cc_is_show      : this.form.isShow,
                        }

                        this.$myLoading.startLoading();

                        this.$http.postHttp(this.$API.cmsColumnUpdate, params , rs => {

                            this.$myLoading.endLoading();
                            this.$myPop.SuccessMessage();

                            setTimeout(()=>{
                                history.go(-1)
                            },1000);

                        });

                    }

                })


            },
            //重置按钮
            resetForm(){
                this.$store.commit('EditColumnModule/udpateForm',this.tempDatas)
            },

            //开启三级联动 选择父级菜单
            parentMenuChanges(){
                console.log(this.form.level)
                if(this.form.level == 0){

                }else{

                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
</style>